<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="p-20" v-for="(item, index) in list" :key="index">
      <cxTreeListItem
        :paramData="item"
        layer="0"
        @tapTitle="tapTitle"
      ></cxTreeListItem>
    </view>
    <!-- 弹窗 -->
    <u-modal :show="expenseTypeShow" :title="title" @cancel="close" @confirm="confirm" showCancelButton=true confirmText="保存">
          <u--input
            placeholder="请输入内容"
            border="surround"
          ></u--input>
    </u-modal>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import cxTreeListItem from "@/components/cx-tree-list-item/cx-tree-list-item.vue";
import { arrayToTree } from '@/utils/util.js'
export default {
  components: {
    clIcon,
    cxTreeListItem,
  },
  data() {
    return {
      title:'新增类型',
      expenseTypeShow: true,
      list: [
        {
          name: "研发部",
          show: true,
          created: true,
          children: [
            {
              name: "研发一部",
              show: true,
              created: true,
              children: [
                {
                  name: "小智",
                },
                {
                  name: "小美",
                },
                {
                  name: "小刚",
                },
                {
                  name: "前端部",
                  children: [
                    {
                      name: "小明",
                    },
                    {
                      name: "美工组",
                      children: [
                        {
                          name: "美美",
                        },
                      ],
                    },
                  ],
                },
                {
                  name: "后端组",
                  children: [
                    {
                      name: "小桦",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      config: {
        title: "费用类型",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
    };
  },

  methods: {
    confirm(){
      this.expenseTypeShow = false
    },
    close() {
      this.expenseTypeShow = false
    },
    open() {},
    tapTitle(item) {
      console.log("item", item);
    },
    clickBtn(item) {
      // this.$Router.push({
      //     name: "financeAccountDetails",
      //   });
      if (item.key === "btn1") {
        this.expenseTypeShow = true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
